<template>
  <basic-container>
    <div id="manage">
      <h3>商品管理</h3>
      <el-select
        style="margin-right: 15px"
        v-model="shopnamevalue"
        filterable
        clearable
        placeholder="请选择店铺名称"
        @change="storeaccess"
      >
        <el-option
          v-for="item in shopname"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        style="margin-right: 15px"
        v-model="shopkeepervalue"
        filterable
        clearable
        placeholder="请选择店主"
        @change="keepersearch"
      >
        <el-option
          v-for="item in shopkeeper"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="input"
        @change="search"
        placeholder="请输入商品名称或类型"
        style="width: 15vw"
      ></el-input
      ><br />
      <el-button type="primary" style="margin-top: 15px" @click="season"
        >批量上架</el-button
      >
      <avue-crud
        ref="crud"
        :option="option"
        :data="data"
        :page="page"
        @row-save="rowSave"
        @selection-change="selectionChange"
        @on-load="onLoad"
      ></avue-crud>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <!-- :before-close="handleClose" -->
      <el-select
        style="margin-right: 15px"
        v-model="seasonvalue"
        filterable
        clearable
        placeholder="请选择店铺名称"
      >
        <el-option
          v-for="item in shopname"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="seasonDetermine">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import $ from "jquery";
// let baseUrl = "http://192.168.0.220:8091";
let baseUrl = "http://122.51.69.142:8091"; //服务器地址
var dicDatas = {
  face: [
    //类型标识下拉框
    {
      label: "新建",
      value: 0,
    },
    {
      label: "复制",
      value: 1,
    },
  ],
  list: [],
  shares: [],
  consumTypeId: [
    //状态下拉框
    {
      label: "待上架",
      value: 1,
    },
    {
      label: "上架",
      value: 2,
    },
    {
      label: "下架",
      value: 3,
    },
  ],
  method: [],
};

export default {
  data() {
    return {
      data: [],
      page: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 50,
      },
      option: {
        addBtn: false,
        menu: false,
        selection: true,
        align: "center",
        menuAlign: "center",
        dialogClickModal: false,
        column: [
          {
            label: "店铺名称",
            prop: "shopName",
          },
          {
            label: "店主",
            prop: "shopkeeper",
          },
          {
            label: "商品名称",
            prop: "goodsName",
          },
          {
            label: "商品类型",
            prop: "categoryName",
          },
          {
            label: "商品进价(分)",
            prop: "purchasePrice",
          },
          {
            label: "库存",
            prop: "stock",
          },
          {
            label: "商品售价(分)",
            prop: "price",
          },
          {
            label: "上架时间",
            prop: "createdOn",
          },
          {
            label: "商品状态",
            prop: "state",
            type: "select",
            dicData: dicDatas.consumTypeId,
          },
          {
            label: "上架类型标识",
            prop: "createFlag",
            type: "select",
            dicData: dicDatas.face,
          },
        ],
      },
      shopname: [], //店铺名称下拉框
      shopnamevalue: "", //店铺名称选中数据
      shopkeeper: [], //店主下拉框
      shopkeepervalue: "", //店主选中数据
      tableSelectList: [], // 选中的数据
      tableLabelList: [], //导出表格的表头
      tablePropList: [], //导出表格的行关联信息
      input: "", //商品名称或类型
      identifier: [], //选中的商品编号
      dialogVisible: false,
      seasonvalue: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.shop();
    this.keeper();
    this.getDataList();
  },
  methods: {
    // 进入页面加载
    getDataList() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getGoodsList`, {
          pageNum: _this.page.pageNum,
          pageSize: _this.page.pageSize,
        })
        .then(function (res) {
          //请求成功

          let resData = res.data;
          if (resData.code == 200) {
            _this.page.total = resData.data.count;
            if (_this.page.total == 0) {
              _this.$refs.crud.$refs.tablePage.$el.style.display = "none";
            }
            _this.data = resData.data.goodsList;
          } else {
            console.log(res);
            _this.$message.error(resData.data);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 获取店铺名称
    shop() {
      this.userInfo.userInfo.roles[0].shops.forEach((item) => {
        this.shopname.push({
          value: item.shopId,
          label: item.name,
        });
      });
      // let _this = this;
      // _this.$ajax
      //   .post(`${baseUrl}/pc/getShopList`)
      //   .then(function (res) {
      //     //请求成功
      //     let resData = res.data;
      //     if (resData.code == 200) {
      //       resData.data.forEach((item) => {
      //         _this.shopname.push({
      //           value: item.shopId,
      //           label: item.name,
      //         });
      //       });
      //     } else {
      //       console.log(res);
      //       _this.$message.error(resData.data);
      //     }
      //   })
      //   .catch(function (error) {
      //     //请求失败
      //     console.log(error);
      //   });
    },
    // 获取店主列表
    keeper() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getShopkeeperList`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            resData.data.forEach((item) => {
              _this.shopkeeper.push({
                label: item.name,
                value: item.id + "",
              });
            });
            // console.log(_this.shopkeeper);
          } else {
            console.log(res);
            _this.$message.error(resData.data);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
      // 获取分成人员列表
      if (dicDatas.list.length == 0) {
        _this.$ajax
          .post(`${baseUrl}/pc/getBindablePartnerList`)
          .then(function (res) {
            //请求成功
            dicDatas.list = [];
            let resData = res.data;
            if (resData.code == 200) {
              resData.data.forEach((item) => {
                dicDatas.list.push({
                  value: item.id,
                  label: item.name,
                });
              });
            } else {
              console.log(res);
              _this.$message.error(resData.data);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    rowCell(row, index) {
      this.$refs.crud.rowCell(row, index);
    },
    // 新增
    rowSave(form, done) {
      this.$message.success("新增数据" + JSON.stringify(form));
      done();
    },
    // 编辑
    rowUpdate(form, index, done) {
      this.$message.success(
        "编辑数据" + JSON.stringify(form) + "数据序号" + index
      );
      done();
    },
    //
    handleRowClick(row) {
      this.$message({
        showClose: true,
        message: "序号" + row.$index,
        type: "success",
      });
    },
    // 选中数据
    selectionChange(list) {
      this.tableSelectList = list;
      this.tableSelectList.forEach((item) => {
        this.identifier.push(item.goodsId);
      });
    },
    //导出按钮
    openSelExcel(st) {
      let _this = this;
      if (st == 1) {
        if (_this.tableSelectList.length === 0) {
          _this.$message({
            message: "请至少选择一条需要导出的数据",
            type: "warning",
          });
          return;
        }
        _this
          .$confirm("该操作将导出选中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出
            let excelList = _this.tableSelectList;
            console.log(excelList);
            _this.openExcel(excelList);
          })
          .catch(() => {});
      } else {
        _this
          .$confirm("该操作将导出表格中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出

            let excelList = _this.data;
            console.log(excelList);
            _this.openExcel(excelList);
          })
          .catch(() => {});
      }
    },
    //店主下拉点击
    keepersearch() {
      let _this = this;
      if (
        _this.shopnamevalue == "" &&
        _this.input == "" &&
        _this.shopkeepervalue == ""
      ) {
        _this.getDataList();
      } else if (_this.shopnamevalue == "" && _this.input == "") {
        _this.$ajax
          .post(`${baseUrl}/pc/getGoodsList`, {
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
            shopUserId: _this.shopkeepervalue,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".el-pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.goodsList;
            } else {
              _this.data = [];
              $(".el-pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else if (_this.shopnamevalue == "") {
        _this.$ajax
          .post(`${baseUrl}/pc/getGoodsList`, {
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
            keyWord: _this.input,
            shopId: _this.shopnamevalue,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".el-pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.goodsList;
            } else {
              _this.data = [];
              $(".el-pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        _this.$ajax
          .post(`${baseUrl}/pc/getGoodsList`, {
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
            keyWord: _this.input,
            shopId: _this.shopnamevalue,
            shopUserId: _this.shopkeepervalue,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".el-pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.goodsList;
            } else {
              _this.data = [];
              $(".el-pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    //店铺下拉点击
    storeaccess() {
      let _this = this;
      if (
        _this.shopnamevalue == "" &&
        _this.input == "" &&
        _this.shopkeepervalue == ""
      ) {
        _this.getDataList();
      } else if (_this.shopkeepervalue == "" && _this.input == "") {
        _this.$ajax
          .post(`${baseUrl}/pc/getGoodsList`, {
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
            shopId: _this.shopnamevalue,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".el-pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.goodsList;
            } else {
              _this.data = [];
              $(".el-pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else if (_this.shopkeepervalue == "") {
        _this.$ajax
          .post(`${baseUrl}/pc/getGoodsList`, {
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
            keyWord: _this.input,
            shopId: _this.shopnamevalue,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".el-pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.goodsList;
            } else {
              _this.data = [];
              $(".el-pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        _this.$ajax
          .post(`${baseUrl}/pc/getGoodsList`, {
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
            keyWord: _this.input,
            shopId: _this.shopnamevalue,
            shopUserId: _this.shopkeepervalue,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".el-pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.goodsList;
            } else {
              _this.data = [];
              $(".el-pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    //输入框搜索
    search() {
      let _this = this;
      if (_this.shopkeepervalue == "" && _this.shopnamevalue == "") {
        _this.$ajax
          .post(`${baseUrl}/pc/getGoodsList`, {
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
            keyWord: _this.input,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".el-pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.goodsList;
            } else {
              _this.data = [];
              $(".el-pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else if (_this.shopkeepervalue == "") {
        _this.$ajax
          .post(`${baseUrl}/pc/getGoodsList`, {
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
            keyWord: _this.input,
            shopId: _this.shopnamevalue,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".el-pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.goodsList;
            } else {
              _this.data = [];
              // $(".el-pagination").style
              $(".el-pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        _this.$ajax
          .post(`${baseUrl}/pc/getGoodsList`, {
            pageNum: _this.page.pageNum,
            pageSize: _this.page.pageSize,
            keyWord: _this.input,
            shopId: _this.shopnamevalue,
            shopUserId: _this.shopkeepervalue,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              $(".el-pagination").css("display", "inline-block");
              _this.page.total = resData.data.count;
              _this.data = resData.data.goodsList;
            } else {
              _this.data = [];
              // $(".el-pagination").style
              $(".el-pagination").css("display", "none");
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    // 批量上架
    season() {
      this.dialogVisible = true;
    },
    // 上架确定
    seasonDetermine() {
      let _this = this;
      if (_this.seasonvalue == "") {
        _this.$message.error("请先选择店铺");
      } else {
        _this.$ajax
          .post(`${baseUrl}/pc/copyGoods`, {
            shopId: _this.seasonvalue,
            // shopId: "202108091652006470681",
            goodsIdList: _this.identifier,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.seasonvalue = "";
              _this.$message.success("上架成功");
              _this.dialogVisible = false;
              _this.$refs.crud.toggleSelection();
            } else {
              _this.dialogVisible = false;
              _this.seasonvalue = "";
              _this.$refs.crud.toggleSelection();
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    // 分页
    onLoad(page) {
      this.page.pageNum = page.currentPage; //页数
      this.page.pageSize = page.pageSize; //条数
      this.getDataList();
    },
  },
};
</script>

<style>
#manage h3 {
  margin: 20px 0;
  display: none;
}
</style>
